<template>
  <div id="sysBindingMg" style="height:100%">
    <ta-border-layout :centerCfg="{showBar: true}">
      <div slot="centerExtraContent">
        <div style="float: left">
          <ta-button type="primary"  @click="editVisible = true; editType = '1'; rowData = {}">新增</ta-button>
          <ta-button type="primary" @click="fnDeleteBinding">批量删除</ta-button>
        </div>
      </div>
      <div >
        <ta-table :columns="Columns"
                  :dataSource="bindingData"
                  :rowSelection="rowSelection"
                  :pagination=false
        >
          <template slot="action" slot-scope="text, record, index">
            <a @click="editVisible = true; editType = '2'; rowData = record; editIndex = index" class="operate">编辑</a>
            <ta-divider type="vertical"/>
            <ta-popconfirm title="确定删除吗?" okText="确定" cancelText="取消"
                           @confirm="() => fnDeleteBinding(record)">
              <a class="operate">删除</a>
            </ta-popconfirm>
          </template>
        </ta-table>
        <ta-pagination style="float: right; margin-top: 10px;"
                       showSizeChanger showQuickJumper
                       :dataSource.sync="bindingData"
                       :defaultPageSize="5"
                       :params="pageParams"
                       :url="searchUrl"
                       ref="gridPager"
        />
      </div>
    </ta-border-layout>
    <!--编辑、新增框-->
    <add-or-edit-sys-binding :visible="editVisible" @close="editVisible = false" :editType="editType" :rowData="rowData" @editSuccess="editSuccess()">
    </add-or-edit-sys-binding>
  </div>
</template>
<script>
import addOrEditSysBinding from './part/addOrEditSysBinding'

const Columns = [
  {title: 'ID', dataIndex: 'id', key: 'id', width: '20%', overflowTooltip: false},
  {title: '系统名称', dataIndex: 'systemname', key: 'systemname', overflowTooltip: false},
  {title: '渠道名称', dataIndex: 'channelname', key: 'channelname', width: '30%', overflowTooltip: false},
  {title: '渠道类型', dataIndex: 'channeltype', key: 'channeltype', width: '10%', overflowTooltip: false},
  {title: '操作', dataIndex: 'operation', key: 'operation', scopedSlots: {customRender: 'action'}, width: '10%', overflowTooltip: false}
]

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  }
}
export default {
  name: 'sysBind',
  components: {addOrEditSysBinding},
  data () {
    return {
      editVisible: false,
      Columns,
      bindingData: [],
      rowSelection,
      editType: '',
      rowData: {},
      searchUrl: '/msg/systemChannel/queryAll'
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    pageParams () {
      let param = {}
      return param
    },
    loadData: function () {
      this.$refs.gridPager.loadData((data) => {
      })
    },
    fnDeleteBinding (record) {}
  },
  editSuccess () {}
}
</script>
